<!-- <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>demo1</title>
  </head>
  <style type="text/css">
    th,
    td {
      width: 150px;
      height: 30px;
      text-align: center;
      vertical-align: middle;
    }
  </style>
  <body>
    <table border="1" cellspacing="1" cellpadding="1">
      <caption style="font-size: 20px; padding-bottom: 20px">
        DEMO示例1
      </caption>

      <tr>
        <th>序号</th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>

      <tr>
        <td>0</td>
        <td>《算法导论》</td>
        <td>2006-9</td>
        <td>￥85.00</td>
        <td>
          <button onclick="subNum(0,85)">-</button>
          <span id="0">1</span>
          <button onclick="addNum(0,85)">+</button>
        </td>
        <td><button onclick="removeNum(0,85)">移除</button></td>
      </tr>

      <tr>
        <td>1</td>
        <td>《UNIX编程艺术》</td>
        <td>2006-2</td>
        <td>￥59.00</td>
        <td>
          <button onclick="subNum(1,59)">-</button>
          <span id="1">1</span>
          <button onclick="addNum(1,59)">+</button>
        </td>
        <td>
          <button onclick="removeNum(1,59)">移除</button>
        </td>
      </tr>

      <tr>
        <td>2</td>
        <td>《编程大全》</td>
        <td>2008-10</td>
        <td>￥39.00</td>
        <td>
          <button onclick="subNum(2,39)">-</button>
          <span id="2">1</span>
          <button onclick="addNum(2,39)">+</button>
        </td>
        <td>
          <button onclick="removeNum(2,39)">移除</button>
        </td>
      </tr>

      <tr>
        <td>3</td>
        <td>《代码大全》</td>
        <td>2006-3</td>
        <td>￥128.00</td>
        <td>
          <button onclick="subNum(3,128)">-</button>
          <span id="3">1</span>
          <button onclick="addNum(3,128)">+</button>
        </td>
        <td>
          <button onclick="removeNum(3,128)">移除</button>
        </td>
      </tr>

      <tr>
        <th>总价：</th>
        <td colspan="5" style="font-weight: bold">
          ￥<span id="totalPrice">311.00</span>
        </td>
      </tr>
    </table>
  </body>
  <script type="text/javascript">
    /*加1方法*/
    function addNum(index, price) {
      //取span标签内的值
      //方法一：document.getElementById(index).innerText
      //方法二：document.getElementsByTagName('span')[index].innerText
      //方法 document.getElementById(index).value 不适用。这个方法适用于当一个元素有value属性的时候，其value才会有值；如果一个元素没有value值，那么使用document.getElementById().value时是取不到值的。
      document.getElementById(index).innerText =
        Number(document.getElementById(index).innerText) + Number(1); //注意加减时使用Number转换，直接相加是字符串的拼接
      document.getElementById("totalPrice").innerText =
        Number(document.getElementById("totalPrice").innerText) + Number(price);
    }

    /*减1方法*/
    function subNum(index, price) {
      var num = document.getElementById(index).innerText;
      if (Number(num) > 0) {
        //到0时不能再减
        document.getElementById(index).innerText =
          Number(document.getElementById(index).innerText) - Number(1);
        document.getElementById("totalPrice").innerText =
          Number(document.getElementById("totalPrice").innerText) -
          Number(price);
      } else {
        alert("数量不能为负数");
      }
    }

    /*移除方法*/
    function removeNum(index, price) {
      var num = document.getElementById(index).innerText;
      document.getElementById(index).innerText = 0;
      document.getElementById("totalPrice").innerText =
        Number(document.getElementById("totalPrice").innerText) -
        Number(price * num);
      //如果移除不再展示那一行，执行下列代码（注意如果不再展示下次就不能添加了，因为页面上没有那一条信息了）
      //alert("开始隐藏")
      //document.getElementById(index).parentNode.parentNode.style.display='none';
    }
  </script>
</html> -->


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>demo3</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style type="text/css">
	th,td{
		width:150px;
		height:30px;
		text-align: center;
		vertical-align: middle;
	}
</style>
<body>
	<table  border="1" cellspacing="1" cellpadding="1" id="app">
 
		<caption style="font-size: 20px;padding-bottom: 20px;">DEMO示例3</caption>
 
		<tr>
			<th>序号</th>
			<th>书籍名称</th>
			<th>出版日期</th>
			<th>价格</th>
			<th>购买数量</th>
			<th>操作</th>
		</tr>
 
		<tr v-for="(item,index) in books" >
			<td>{{item.xuhao}}</td>
			<td>{{item.shujimingcheng}}</td>
			<td>{{item.chubanriqi}}</td>
			<td>￥<span class="priceClass">{{item.jiage}}</span></td>
			<td>
				<button @click="subNum(index)">-</button>
				<span class="numClass">{{item.goumaishuliang}}</span>
				<button @click="addNum(index)">+</button>
			</td>
			<td><button  @click="removeNum(index)">移除</button></td>
		</tr>
 
		<tr>
			<th>总价：</th>
			<td colspan="5" style="font-weight: bold;">￥{{totalPrice}}</td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			books: [
				{ xuhao: 0, shujimingcheng: '《算法导论》', chubanriqi: "2006-9", jiage: 85,goumaishuliang:1},
				{ xuhao: 1, shujimingcheng: '《UNIX编程艺术》', chubanriqi: "2006-2", jiage: 59,goumaishuliang:1 },
				{ xuhao: 2, shujimingcheng: '《编程大全》', chubanriqi: "2008-10", jiage: 39,goumaishuliang:1 },
				{ xuhao: 3, shujimingcheng: '《代码大全》', chubanriqi: "2006-3", jiage: 128,goumaishuliang:1 }
			],
			totalPrice:312
		},
		methods: {
			subNum: function (index) {
				var num = this.books[index].goumaishuliang;
				var price = this.books[index].jiage;
				if(num>0){//到0时不能再减
					this.books[index].goumaishuliang--;
					this.totalPrice = this.totalPrice - price;
				}else{
					alert("数量不能为负数")
				}
			},
			addNum: function (index) {
				var price = this.books[index].jiage;
				this.books[index].goumaishuliang++;
				this.totalPrice = this.totalPrice + price;
			},
			removeNum: function (index) {
				var num = this.books[index].goumaishuliang;
				var price = this.books[index].jiage;
				this.books[index].goumaishuliang = 0;
				this.totalPrice = this.totalPrice - price*num;
			}
		}
	});
</script>
</html>
